import { useEffect, useState } from 'react';
import { CommonList, TableListPage, Operate } from '@common';
import { withRouter, useHistory } from 'react-router-dom';
import cls from './index.module.less';
import { Create } from './create';
import { Request, urlSearchParse, urlSearchSringify, removeUrlDefaultValue } from '@common'
import { ColumnType } from 'antd/lib/table';
import { LazyImage } from 'zw-components'
import { Switch } from 'antd';
if(__ENV__ === 'development') {
  require('./mock');
}


function useColumn() {
  const [columns, setColumns] = useState<any[]>([]);
  useEffect(() => {
    const _columns: ColumnType<any>[] = [
      {
        title: '项目LOGO',
        dataIndex: 'cover',
        key: 'cover',
        render: (src: string) => {
           return (
             <LazyImage src={src} style={{height: '40px', width: '40px'}}/>
           )
        }
      },
      {
        title: '项目名称',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: '接口前缀',
        dataIndex: 'apiPrefix',
        key: 'apiPrefix'
      },
      {
        title: '环境',
        dataIndex: 'envs',
        key:'envs',
        render: (envs: string[]) => {
          return envs.join('、');
        }
      },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        render: (status: boolean) => {
          return <Switch defaultChecked={false} onChange={() => {

          }} />
        }
      },
      {
        title: '操作',
        key: 'operate',
        render: () => {
          return (
            <div>
              <Operate.Link to="/home">查看分组</Operate.Link>
              <Operate.Link to="/home2">查看API</Operate.Link>
              <Operate.View onClick={() => {}}/>
              <Operate.Edit onClick={() => {}} />
              <Operate.Delete onClick={() => {}} />
            </div>
          )
        }
      }
    ];
    setColumns(_columns)
  }, []);
  return [columns];
}
const defaultParam = {
  page: 1,
  pageSize: 20
}
export const ProjectList = (props: any) => {
  const [column] = useColumn();
  const history = useHistory();
  const [data, setData] = useState<any>([]);
  const [total, setTotal] = useState(0);
  const [params, setParams] = useState<any>(() => {
    console.log('===============')
    let urlParam = urlSearchParse(history.location.search);
    return {...defaultParam, ...urlParam};
  });
  useEffect(() => {
    // console.log(history.location.search)
    Request.getList('/api/get/user', params).respone.then(res => {
      console.log(res);
      if(res.code === 1) {
        setData(res.data.list);
        setTotal(res.data.total)
      }
    });
  }, [history.location.search]);
  useEffect(() => {
    console.log(params)
    let _param = removeUrlDefaultValue(params, defaultParam);
    let seachUrm = urlSearchSringify(_param);
    let path = props.match.url;
    history.push(path + seachUrm);
  }, [params]);
  const onPageChange = (newPage: number, pageSize: any) => {
    setParams({...params, page: newPage, pageSize: pageSize});
  }
  return (
    <div className={cls.container}>
      <div className={cls.content}>
        <CommonList.Container name="项目">
          <CommonList.Operate>
            <Create />
          </CommonList.Operate>
          <CommonList.Body>
            <TableListPage onPageChange={onPageChange} currentPage={params.page} pageSize={params.pageSize} total={total}  column={column} data={data}></TableListPage>
          </CommonList.Body>
        </CommonList.Container>
      </div>
    </div>

  );
}
export default withRouter(ProjectList);